<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                    <el-breadcrumb-item>余额宝列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
              <template #header>
                <div style="display: flex; align-items: center;">
                  <el-input style="width: 260px;" v-model="inputval" placeholder="请输入 UID、手机、昵称、备注" />
                  <div style="padding: 5px;"></div>
                  <el-button type="primary" :icon="Search" @click="inputSearch()">搜索</el-button>
                </div>
              </template>
                <!-- 表格 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="60" />
                    <el-table-column prop="name" label="用户信息" >
                      <template #default="scope">
                        <div>uid：{{scope.row.user.uid}}</div>
                        <div>昵称：{{scope.row.user.nickname}}</div>
                        <div>手机：{{scope.row.user.phone?scope.row.user.phone:'未绑定'}}</div>
                        <div>余额：{{scope.row.user.money}}</div>
                        <div>彩金：{{scope.row.user.voucher}}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="balance" label="总余额" />
                    <el-table-column prop="y_income" label="昨日收益" />
                    <el-table-column prop="balance_income" label="总收益" />
                    <el-table-column prop="balance_income" label="vip等级">
                      <template #default="scope">
                      <el-tag type="success" plain v-if="scope.row.user.vip>0">{{scope.row.vipInfo.name}}</el-tag>
                      <el-tag type="danger" plain v-else>无</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="earning_rate" label="日收益利率" >
                      <template #default="scope">
                        {{scope.row.vipInfo.balance_income}}%
                      </template>

                    </el-table-column>
                    <el-table-column prop="create_time" label="创建时间" />
                </el-table>
                <!-- 分页 -->

                <div style="padding: 10px;"></div>
                <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                    :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                    :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </el-card>
        </el-col>
    </el-row>

</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, UserFilled, Search } from '@element-plus/icons-vue'
import {useRouter} from "vue-router";

const router = useRouter();
const roomDialog = ref(false);
const tableData = reactive({ list: [] });


onMounted(() => {
    getList()
})

function inputSearch() {
  if (inputval.value == '') {
    return error('请输入UID或用户名')
  }
  page.uid = inputval.value
  getList()
}

// 获取列表
function getList() {
    request_post('/admin_balance_bao_list', page).then((res) => {
        if (res.data.code == 200) {
            tableData.list = res.data.data.data
            page.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })
}

const page = reactive({
    uid: null,
    pagenum: 1,
    pagesize: 18,
    total: 0
})

function handleSizeChange(val) {
    page.pagenum = val
  getList()
}
function handleCurrentChange(val) {
    page.pagenum = val
  getList()
}


</script>

<style></style>
